<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Franklin Capital Corporation</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="container">
            <header>
                <h1><img src="images/Franklin-Capital-Corporation-logo.png" alt="Franklin Capital Corporation"  />Franklin Capital Corporation </h1>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#" class="first selected">Make a Payment</a></li>
                        <li><a href="#">Auto Pay Setup</a></li>
                        <li><a href="#">View History</a></li>
                        <li><a href="#">Manage Account</a></li>
                    </ul>
                </nav>
                <form id="search" method="post" action="">
                    <input type="text" value="Search" />
                    <span></span>
                    <button type="submit">Go</button>
                </form>
            </header>
            <div id="content" class="inner">
                <ul class="step_nev">
                    <li>Payment Method</li>
                    <li class="selected">Payment Info</li>
                    <li>Confirmation</li>
                </ul>
                <div id="body_ontainer" class="col2">
                    <h2 id="heading"><strong>Checking /</strong> Savings</h2>
                        <div class="whitePanelBox placeholder1">
                            <p class="name">
                                <strong>Mark Smith<br/>A/C # : 2254566896</strong>
                            </p>
                            <p class="address">
                                1850 K Street NW<br/>between 18th and 19th Streets NW<br/>
                                Washington, DC 20006<br/>
                                866-789-0726
                            </p>
                            <label class="checking_date">4th Nov 2011</label>                            
                            <form id="savings" method="post" action="#">
                                <ul>
                                    <li><label class="text_label">Pay to the Oder of:</label>
                                        <input type="text" class="textBox long" />
                                    </li>
                                    <li><label class="text_label">Amount:</label>
                                        <input type="text" class="textBox small" />
                                    </li>
                                    
                                    <li class="logo">
                                        <img src="images/wb-logo.png"/>
                                        <p>1850 K Street NW<br/>
                                            between 18th and 19th Streets NW<br/>
                                            Washington, DC 20006<br/>866-789-0726</p>
                                    </li>
                                    <li><label class="text_label">Routing Number:</label>
                                        <input type="text" class="textBox" />
                                    <li><label class="text_label">Account Number:</label>
                                        <input type="text" class="textBox" />
                                    </li>
                                    <li class="signature">
                                        <p>Signature:<br/><strong>Mark Smith</strong></p>
                                    </li>
                                    <li class="agree">
                                        <li><label class="text_label"></label>
                                        <input id="checkbox" type="checkbox" name="agree"  value="0" />                             
                                        <label class="condition">Make this payment a recovering payment. Signup for Auto Pay. Read more</label>
                                    </li>
                                    <li>
                                        <li><label class="text_label"></label>
                                        <input type="submit" class="submit_button" />
                                    </li>
                                </ul>
                            </form>
                        </div>    
                    <div class="side_bar">
                        <ul class="box">
                            <li class="header"><h3><strong>Scheduled</strong> Payment</h3></li>
                            <li>Past Due Amount</li>
                            <li>Past Due Amount</li>
                            <li>Past Due Amount</li>
                            <li>Past Due Amount</li>
                            <li>Past Due Amount</li>
                            <li>Past Due Amount</li>
                        </ul>
                        <ul class="box">
                            <li class="header"><h3><strong>Payment</strong> Info</h3></li>
                            <li>Payment Info</li>
                            <li>Payment Info</li>
                            <li>Payment Info</li>
                            <li>Payment Info</li>
                            <li>Payment Info</li>
                            <li>Payment Info</li>
                        </ul>                      
                    </div>
                </div>
            </div>
            <footer>
                <ul>
                    <li class="needHelp"> Need help? </li>
                    <li class="customerServiceOnline"> 
                        <a href="#" title="Click to contact Customer Services Online">Click</a>
                        <strong>Customer Service Online</strong> 
                    </li>
                    <li class="call">
                        <p>Call <a href="tel:1-800-125-9568">1-800-FCC-1 (1-800-125-9568)</a></p>
                    </li>
                    <li class="visit">
                        <p>Visit a <strong>FCC Branch</strong></p>
                    </li>
                </ul>
                <div id="copyright">
                    <hr />
                    Copyright © 2011. Franklin Capital Corporation. All rights reserved. <a href="">Terms of Use</a> | <a href="">Privacy Policy</a> 
                </div>
            </footer>
            <script type="text/javascript">
                   $("input[type='checkbox']").each(function(){
                        var thisCheckbox = $(this);
                        var newCheckbox = $('<span class="form_check small"></span>');
                        if(thisCheckbox.is(':checked')){
                            newCheckbox.addClass('checked_small');
                        }

                        newCheckbox.click(function(){
                            thisCheckbox.click();
//                            $("span.form_check[name='"+thisCheckbox.attr('name')+"']").removeClass('checked');
//                            $(this).addClass('checked');

                            $(this).toggleClass('checked');
                        });

                        thisCheckbox.change(function(){
                            newCheckbox.click();
                        });

                        newCheckbox.attr('name', thisCheckbox.attr('name'));
                        thisCheckbox.hide(0).after(newCheckbox);
                    });
            </script>
            
            <script>
                $(function(){
                    $("ul.box").each(function(){
                        $("li:not(.header):not(.box.last li):even", $(this)).css("background-color", "#efefef");
                    });
                });
            </script>
        </div>
    </body>
</html>